<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品陈列检测结果</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        :root {
            --primary-color: #e62227;
            --secondary-color: #f8981d;
            --background-color: #f8f9fa;
            --card-background: #ffffff;
            --text-color: #333;
            --light-text-color: #6c757d;
            --border-color: #dee2e6;
            --shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            background-color: var(--background-color);
            color: var(--text-color);
        }

        .top-nav {
            background-color: var(--card-background);
            box-shadow: var(--shadow);
            padding: 0 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
        }

        .logo {
            max-height: 40px;
        }

        .nav-menu {
            display: flex;
            gap: 25px;
        }

        .nav-link {
            color: var(--text-color);
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
            padding: 10px 15px;
            border-radius: 8px;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-link:hover,
        .nav-link.active {
            background-color: rgba(230, 34, 39, 0.1);
            color: var(--primary-color);
        }

        .container {
            max-width: 800px;
            margin: 40px auto;
            padding: 40px;
        }

        .result-header {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
            text-align: center;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .stat-card {
            background-color: var(--card-background);
            border-radius: 12px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: var(--shadow);
        }

        .stat-card .value {
            font-size: 28px;
            font-weight: bold;
        }

        .stat-card .label {
            font-size: 14px;
            color: var(--light-text-color);
        }

        .stat-card .icon {
            font-size: 24px;
            color: var(--primary-color);
        }

        .details-card {
            background-color: var(--card-background);
            border-radius: 12px;
            padding: 20px;
            box-shadow: var(--shadow);
        }

        .details-header {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .details-table {
            width: 100%;
            border-collapse: collapse;
        }

        .details-table tr {
            border-bottom: 1px solid var(--border-color);
        }

        .details-table tr:last-child {
            border-bottom: none;
        }

        .details-table td {
            padding: 15px 5px;
            font-size: 16px;
        }

        .details-table .count {
            text-align: right;
            font-weight: 500;
        }

        .result-image {
            text-align: center;
            margin-bottom: 20px;
        }

        .result-image img {
            max-width: 100%;
            max-height: 600px;
            /* 默认缩小显示 */
            border-radius: 12px;
            box-shadow: var(--shadow);
            cursor: zoom-in;
            transition: transform 0.2s ease;
        }

        /* 图片放大模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            margin: auto;
            display: block;
            max-width: none;
            max-height: none;
        }

        .close {
            position: absolute;
            top: 20px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
        }


        .back-button:hover {
            background-color: #f8f9fa;
            transform: scale(1.05);
        }

        .back-button svg {
            stroke: var(--text-color);
        }

        .error {
            text-align: center;
            color: #ff4d4f;
            font-size: 18px;
            padding: 40px 20px;
        }

        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
            text-align: center;
        }

        .alert-success {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6;
        }

        .alert-danger {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }

        .alert-info {
            color: #31708f;
            background-color: #d9edf7;
            border-color: #bce8f1;
        }

        @media (max-width: 768px) {
            .top-nav {
                padding: 0 20px;
                height: 60px;
            }

            .nav-menu {
                gap: 10px;
            }

            .nav-link {
                font-size: 14px;
                padding: 8px 10px;
            }

            .nav-link i {
                display: none;
            }

            .container {
                padding: 20px;
                margin: 20px auto;
            }
        }

        @media (max-width: 480px) {
            .nav-link {
                font-size: 13px;
                padding: 6px 8px;
            }
        }
    </style>
</head>

<body>
    {% include '_nav.html' %}
    <div class="container">
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        <div class="flashes">
            {% for category, message in messages %}
            <div class="alert alert-{{ category }}">{{ message }}</div>
            {% endfor %}
        </div>
        {% endif %}
        {% endwith %}

        {% if error %}
        <p class="error">{{ error }}</p>
        {% elif result %}
        <div class="result-image">
            <img id="resultImage" src="{{ result.image_path }}" alt="检测图片">
        </div>

        <!-- 放大图片的模态框 -->
        <div id="myModal" class="modal">
            <span class="close">&times;</span>
            <img class="modal-content" id="img01">
        </div>

        <h2 class="result-header">识别结果</h2>

        <div class="stats-grid">
            <div class="stat-card">
                <div>
                    <div class="value">{{ result.sku_count }}</div>
                    <div class="label">健力宝数量</div>
                </div>
                <i class="fas fa-boxes-stacked icon"></i>
            </div>

            <div class="stat-card">
                <div>
                    <div class="value">{{ result.layer_count }}</div>
                    <div class="label">层数</div>
                </div>
                <i class="fas fa-layer-group icon"></i>
            </div>
        </div>

        {% if result.layers_details %}
        <div class="details-card">
            <div class="details-header">分层详情</div>
            {% for layer in result.layers_details %}
            <div class="layer-details">
                <h4>第 {{ layer.layer_index }} 层
                    <span class="layer-summary">
                        (健力宝: {{ layer.sku_total }})
                    </span>
                </h4>
                <table class="details-table">
                    <tbody>
                        {% for name, count in layer.sku_details.items() %}
                        <tr>
                            <td>{{ name }}</td>
                            <td class="count">{{ count }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endfor %}
        </div>
        {% elif result.sku_details %}
        <div class="details-card">
            <div class="details-header">商品列表</div>
            <table class="details-table">
                <tbody>
                    {% for name, count in result.sku_details.items() %}
                    <tr>
                        <td>{{ name }}</td>
                        <td class="count">{{ count }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}
        <style>
            .layer-details {
                margin-bottom: 20px;
            }

            .layer-details {
                border: 1px solid var(--border-color);
                border-radius: 10px;
                padding: 15px;
                margin-bottom: 15px;
                background-color: #fafafa;
            }

            .layer-details h4 {
                margin-top: 0;
                margin-bottom: 15px;
                font-weight: 600;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: var(--primary-color);
                color: white;
                padding: 8px 12px;
                border-radius: 6px;
            }

            .layer-summary {
                font-size: 14px;
                font-weight: normal;
                background-color: rgba(255, 255, 255, 0.2);
                padding: 4px 8px;
                border-radius: 4px;
            }
        </style>
        {% endif %}
    </div>

    <script>
        // 获取模态框
        var modal = document.getElementById("myModal");
        var modalImg = document.getElementById("img01");
        var resultImage = document.getElementById("resultImage");

        resultImage.onclick = function () {
            modal.style.display = "flex";
            modalImg.src = this.src;
        }

        // 获取关闭按钮
        var span = document.getElementsByClassName("close")[0];

        // 点击关闭按钮关闭模态框
        span.onclick = function () {
            modal.style.display = "none";
        }

        // 点击模态框背景关闭
        modal.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

        // Auto-hide flash messages
        document.addEventListener('DOMContentLoaded', (event) => {
            const flashes = document.querySelector('.flashes');
            if (flashes) {
                setTimeout(() => {
                    flashes.style.transition = 'opacity 0.5s ease';
                    flashes.style.opacity = '0';
                    setTimeout(() => flashes.style.display = 'none', 500);
                }, 3000); // 3 seconds
            }
        });
    </script>
</body>

</html>